import React, {Component,Fragment} from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { KeyValue,Row,Col ,Label,Button,ButtonGroup,Popper} from '@folio/stripes/components';
import { stripesConnect, IfPermission } from '@folio/stripes/core';
import ModalPreview from '../../util/ModalPreview'
class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.anchorRef = React.createRef();
        this.state={
            isOpen: false,
        }
    }

    static propTypes = {
        initialValues: PropTypes.object,
        intl: PropTypes.func,
        closeModal:PropTypes.func,
        edit:PropTypes.func,
        qrCode:PropTypes.func,
        approval:PropTypes.func,
        del:PropTypes.func,
    };
    toggle = () => {
        this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
    }
    mouseToggle = (flag) => {
        this.setState((prevState) => ({ isOpen: flag }));
    }
    render() {
        const {initialValues,edit,qrCode,approval,del ,intl} = this.props
        const  approvalStatus=  (item)=>{

            if (initialValues.approval === 0) {
                return [<div><FormattedMessage id="ui-party.loans.columns.party.unapproved" /></div>];
            }
            if (initialValues.approval === 1) {
                return [<div><FormattedMessage id="ui-party.loans.columns.party.approved" /></div>];
            }
            if (initialValues.approval === 2) {
                return [<div><FormattedMessage id="ui-party.loans.columns.party.reject" /></div>];
            }

            return [<div />];

        }
        const categoryStatus = (item) => {

            const option = [
                {
                    label: intl.formatMessage({id: 'ui-party.loans.columns.party.needReserveAndNotApproval'}),
                    value: 1
                },
                {
                    label: intl.formatMessage({id: 'ui-party.loans.columns.party.needReserveAndNeedApproval'}),
                    value: 2
                },
                {
                    label: intl.formatMessage({id: 'ui-party.loans.columns.party.notReserveAndNotApproval'}),
                    value: 3
                }
            ];
            return option.find(a=>a.value ===item.category).label
        }
        return (

                <ModalPreview dismissible closeOnBackgroundClick open label={<FormattedMessage id={"ui-party.preview"}/>}  onClose={()=>{this.props.closeModal()}}
                              rightLabel={[
                                  <ButtonGroup>
                                      <IfPermission perm="ui-party.property.manage.view.edit">
                                      <Button  onClick={()=>{edit(initialValues.id)}}><FormattedMessage id="ui-party.loans.columns.operating.edit" /></Button>
                                      </IfPermission>
                                      <IfPermission perm="ui-party.party.approval">
                                          <Button  onClick={()=>{approval(initialValues)}}> <FormattedMessage id="ui-party.loans.columns.operating.approval" /></Button>
                                      </IfPermission>

                                      <Button  buttonRef={this.anchorRef}
                                               onClick={this.toggle}>
                                          <FormattedMessage id="ui-party.loans.columns.operating.qrcode" />
                                      </Button>
                                      <Popper
                                          isOpen={this.state.isOpen}
                                          anchorRef={this.anchorRef}
                                          style={{left:50}}
                                      >
                                          <div
                                              style={{
                                                  background: 'white',
                                                  padding: '10px',
                                                  width: '128px',
                                                  borderRadius: '4px',
                                                  boxShadow: '0px 0px 5px 0px grey',
                                                  marginBottom: '0px',
                                              }}
                                          >
                                              <IfPermission perm="ui-party.info.manage.view.reserve.qrcode">
                                                  <Button fullWidth onClick={()=>{qrCode(initialValues,'regist')}}>
                                                      <FormattedMessage id="ui-party.loans.columns.operating.reserve.qrcode" />
                                                  </Button>
                                              </IfPermission>
                                              <IfPermission perm="ui-party.info.manage.view.attend.qrcode">
                                                  <Button fullWidth onClick={()=>{qrCode(initialValues,'check')}}>
                                                      <FormattedMessage id="ui-party.loans.columns.operating.attend.qrcode" />
                                                  </Button>
                                              </IfPermission>

                                          </div>
                                      </Popper>
                                      <IfPermission perm="ui-party.info.manage.view.delete">
                                          <Button  onClick={()=>{del(initialValues.id)}}>
                                              <FormattedMessage id="ui-party.loans.columns.operating.remove" />
                                          </Button>
                                      </IfPermission>

                                  </ButtonGroup>
                              ]}
                >
                     <Row>
                         <Col xs={12}>
                             <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.partyName"}/>} value={initialValues.partyName}/>

                         </Col>

                     </Row>
                    <Row>
                        <Col xs={3}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.propertyName"}/>} value={initialValues.propertyName}/>

                        </Col>
                        <Col xs={3}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.quota"}/>} value={initialValues.quota}/>

                        </Col>
                        <Col xs={3}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.category"}/>} value={categoryStatus(initialValues)}/>

                        </Col>
                        <Col xs={3}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.venue"}/>} value={initialValues.venue}/>

                        </Col>
                    </Row>
                    <Row>

                        <Col xs={3}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.facName"}/>} value={initialValues.facName}/>

                        </Col>
                        <Col xs={3}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.deviceCount"}/>} value={initialValues.facCount}/>

                        </Col>
                        <Col xs={3}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.approvalStatus"}/>} value={approvalStatus(initialValues)}/>

                        </Col>
                    </Row>
                    <Row>
                        {
                            initialValues.reserveStartDate&&<Col xs={6}>
                                <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.reserveDate"}/>} value={`${initialValues.reserveStartDate} - ${initialValues.reserveEndDate}`}/>

                            </Col>
                        }
                        {
                            initialValues.attendStartDate&& <Col xs={6}>
                                <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.attendDate"}/>} value={`${initialValues.attendStartDate} - ${initialValues.attendEndDate}`}/>

                            </Col>
                        }

                        <Col xs={12}>
                            <KeyValue label={<FormattedMessage id={"ui-party.loans.columns.party.partyDate"}/>} value={`${initialValues.partyStartDate} - ${initialValues.partyEndDate}`}/>

                        </Col>
                    </Row>
                    <Row >
                        <Col xs={12}>
                            <Label><FormattedMessage id={"ui-party.loans.columns.party.description"}></FormattedMessage></Label>
                        </Col>
                        <Col xs={12}>
                            {initialValues.depict ?  <div style={{width:'100%',height:50}} dangerouslySetInnerHTML={{__html: decodeURI(initialValues.depict)}}>

                            </div>:<div><FormattedMessage id={"ui-party.other.no.event.description"}/></div> }

                        </Col>
                    </Row>
                </ModalPreview>

        );
    }
}


export default injectIntl(stripesConnect(MyComponent));

